<template>
	<view class="box">
		<image @click="SetImgurl" :src="imgurl == '' ? '../../static/logo.png' : imgurl" mode="aspectFit" style="width: 12vh; height: 12vh; border-radius: 50%;">
		<view style="color: blue;">点击图片更换头像</view>
		<view class="contentbox">
			<button @click="SetUserInfo('name')">修改昵称</button>
			<button @click="isShow = true">修改密码</button>
			<button @click="SetUserInfo('bind')">修改绑定</button>
		</view>
		
		<!-- 修改密码弹窗 -->
		<view class="cover" v-if="isShow">
			<view class="popbox">
				<view class="inputbox">
					旧密码：<input type="text" v-model="password" password>
					<hr>
				</view>
				<view class="inputbox">
					新密码：<input type="text" v-model="newpassword" password>
					<hr>
				</view>
				<view class="inputbox">
					确认密码：<input type="text" v-model="confirmPassword" password>
					<hr>
				</view>
				<button @click="SetPassword" type="primary">确认</button>
				<button @click="isShow = false" plain>关闭</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { getuserinfo, setpassword, setname, setbind, setimgurl } from '../../apis/userAPI.js'
	import { pathToBase64, base64ToPath } from "../../utils/mmmm-image-tools.js"
	export default {
		data() {
			return {
				imgurl: null,
				userInfo: {},
				isShow: false,
				password: '',
				newpassword: '',
				confirmPassword: ''
			}
		},
		onLoad() {
			let that = this
			if (this.$store.state.userInfo == null) {
				getuserinfo({
					username: uni.getStorageSync('token')
				}).then(res => {
					that.$store.dispatch('setuserInfo', res.userInfo)
					that.imgurl = res.userInfo.imgurl
					that.userInfo = res.userInfo
				})
			} else {
				this.imgurl = this.$store.state.userInfo.imgurl
				this.userInfo = this.$store.state.userInfo
			}
		},
		methods: {
			// 修改密码
			SetPassword() {
				if (this.newpassword.split(' ').join('') == '' || this.password.split(' ').join('') == '' || this.newpassword !== this.confirmPassword) {
					uni.showToast({
					    title: '新密码不为空或确认密码不一致',
					    duration: 1000,
					    icon: "none"
					})
					return
				}
				let that = this
				setpassword({
					username: uni.getStorageSync('token'),
					oldpassword: this.password,
					newpassword: this.newpassword
				}).then(res => {
					uni.showToast({
					    title: '修改成功',
					    duration: 1000,
					    icon: "success"
					})
					that.password = ''
					that.newpassword = ''
					that.confirmPassword = ''
					that.isShow = false
				})
			},
			// 修改昵称/绑定
			SetUserInfo(type) {
				let that = this
				let str = type=='bind' ? `已绑定：${this.userInfo.bind}` : `旧昵称：${this.userInfo.name}`
				uni.showModal({
					title: str,
					confirmColor:'#3A3A3A',
					cancelColor:'#999999',
					confirmText:'修改',
					editable: true,//显示
					content:'',
					success: function (res) {
						if (res.confirm) {
							if (res.content.split(' ').join('') == '') {
								uni.showToast({
								    title: '输入内容不能为空',
								    duration: 1000,
								    icon: "none"
								})
								return
							}
							if (type == 'bind') {
								setbind({
									username: uni.getStorageSync('token'),
									bind: res.content
								}).then(r => {
									that.userInfo.bind = res.content
									that.$store.dispatch('setuserInfo', that.userInfo)
								})
							} else {
								setname({
									username: uni.getStorageSync('token'),
									name: res.content
								}).then(r => {
									that.userInfo.name = res.content
									that.$store.dispatch('setuserInfo', that.userInfo)
								})
							}
						}
					}
				})
			},
			// 替换头像
			SetImgurl() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
				  success: function (res) {
					let tempFilePaths = res.tempFilePaths;
					pathToBase64(tempFilePaths[0])		//图像转base64工具
					  .then(base64 => {
						that.imgurl = base64
						uni.showModal({
							title: '是否确定修改头像？',
							success: function (res) {
								if (res.confirm) {
									setimgurl({
										username: uni.getStorageSync('token'),
										imgurl: base64
									})
									that.userInfo.imgurl = base64
									that.$store.dispatch('setuserInfo', that.userInfo)
								} else if (res.cancel) {
									that.imgurl = that.userInfo.imgurl
								}
							}
						})
					  })
					  .catch(error => {
						console.error(error)
					  })
				  }
				});
			},
			
			
		}
	}
</script>

<style lang="less" scoped>
	.box {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		
		image {
			margin-top: 10vh;			
			// &:active {
			// 	background-color: #dedede;
			// }
			margin-bottom: 2vh;
		}
		
		.contentbox {
			margin-top: 3vh;
			
			button {
				width: 90vw;
				height: 8vh;
				line-height: 8vh;
				margin: 1vh 0;
			}
		}
		
		.cover {
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			background-color: rgba(238, 238, 238, .9);
			
			.popbox {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: 10;
				background-color: #f8f8f8;
				padding: 2vh;
				border: 1px solid rgba(0,0,0,.2);
				border-radius: 10px;
				
				.inputbox {
					font-size: 2.5vh;
					margin: 1.5vh 0;
					width: 80vw;
					
					input {
						font-size: 2.8vh;
						margin-top: 1vh;
					}
				}
				
				button {
					margin-top: 1vh;
				}
			}
		}
	}
</style>
